<template>
    <div>
        <avue-form ref="form" v-model="obj" :option="option"
                   @reset-change="emptytChange"
                   @submit="submit">
            <template slot-scope="{row}" slot="details">
                <TinymceEditor v-if="initSuccess" :content.sync="obj.details"/>
            </template>

            <template slot-scope="{row}" slot="goodsSpecsList">
                <avue-crud ref="goodsSpecsCrud" v-if="initSuccess" :data="obj.goodsSpecsList" :option="goodsSpecsOption" @row-update="addUpdate" @row-del="rowDel" @row-save="rowSave"></avue-crud>
            </template>
        </avue-form>
    </div>
</template>

<script>

    import {baseUploadUrl} from "@/config/env";

    export default {
        data() {
            return {
                // 商品分类数据
                categoryList: [],
                obj: {},
                isIdFind: true,
                initSuccess: false,
                // 规格表格配置
                goodsSpecsOption: {
                    addBtn: false,
                    addRowBtn: true,
                    cellBtn: true,
                    refreshBtn: false,
                    columnBtn: false,
                    delBtn: true,
                    menuWidth: 250,
                    //rowKey: "id",
                    column: [
                        {
                            label: 'id',
                            prop: 'id',
                            hide: true
                        },
                        {
                            label: '规格名',
                            prop: 'specsName',
                            cell: true,
                        },
                        {
                            label: '单价',
                            prop: 'specsPrice',
                            cell: true,
                            type: 'number',
                            precision: 2, //保留小数位
                            minRows: 0.01,
                            maxRows: 99999999999,
                        },
                        {
                            label: '库存',
                            prop: 'specsStock',
                            cell: true,
                            type: 'number',
                            precision: 0, //保留小数位
                            minRows: 1,
                            maxRows: 99999999999,
                        }, {
                            label: '排序',
                            prop: 'sort',
                            cell: true,
                            type: 'number',
                            precision: 0, //保留小数位
                            minRows: 0,
                            maxRows: 99999999999,
                        }
                    ]
                },
            }
        },
        props: {

            closeDialog: [],
            uri: {},
            rowData: {},
        },
        computed: {
            option() {
                return {
                    submitBtn: true,
                    emptyBtn: true,
                    submitText: '提交',
                    emptyText: "关闭",
                    column: [
                        {
                            label: '类型分类',
                            prop: 'categoryIds',
                            dataType: 'string',  // 字符串模式
                            maxlength: 128,
                            showWordLimit: true,
                            span: 20,
                            type: "cascader",
                            dicData: this.categoryList,
                            props: {
                                value: "id",
                                label: "name",
                                children: "children"
                            },
                            rules: [{
                                required: true,
                                message: "请输入 类型Ids",
                                trigger: "blur"
                            }]
                        },
                        {
                            label: '商品名称',
                            prop: 'name',
                            maxlength: 256,
                            showWordLimit: true,
                            span: 20,
                            rules: [{
                                required: true,
                                message: "请输入 商品名称",
                                trigger: "blur"
                            }]
                        },
                        {
                            label: '封面图',
                            prop: 'coverPic',
                            span: 24,
                            rules: [{
                                required: true,
                                message: "请上传 商品-封面图 ",
                                trigger: "blur"
                            }],
                            dataType: 'string',  // 字符串模式
                            type: 'upload',
                            listType: 'picture-img',                // 图片格式, 单图-[picture-img]  多图-[picture-card]  缩略图-[picture] 普通文件空
                            action: baseUploadUrl + 'image/gc/',    // 上传地址 + 文件保存上传地址(详见接口描叙)
                            multiple: false,       // 文件多选
                            drag: true,            // 拖拽排序
                            limit: 1,              // 上传数量 1 个
                            //fileSize: 500,         // 上传大小 500 kb内
                            loadText: '上传中...',  // 上传中文字提示
                            tip: '只能上传jpg/png/gif文件',
                            propsHttp: {
                                res: 'data'
                            },
                            uploadBefore: (file, done) => {
                                // 文件上传前处理
                                done(file)
                            },
                            uploadAfter: (res, done) => {
                                this.$message.success('上传成功');
                                done()
                            },
                            uploadError(error, column) {
                                // 上传失败
                                this.$message.error(error);
                            },
                            uploadExceed(limit, files, fileList, column) {
                                // 文件数量验证
                                this.$message.warning(`当前限制文件数量为 ${limit}, 当前共 ${files.length + fileList.length} `);
                            },
                        },
                        {
                            label: '轮播图',
                            prop: 'pics',
                            span: 24,
                            rules: [{
                                required: true,
                                message: "请上传 商品-轮播图 ",
                                trigger: "blur"
                            }],
                            dataType: 'string',  // 字符串模式
                            type: 'upload',
                            listType: 'picture-card',                // 图片格式, 单图-[picture-img]  多图-[picture-card]  缩略图-[picture] 普通文件空
                            action: baseUploadUrl + 'image/gc/',    // 上传地址 + 文件保存上传地址(详见接口描叙)
                            multiple: true,        // 文件多选
                            drag: true,            // 拖拽排序
                            limit: 10,              // 上传数量 1 个
                            //fileSize: 500,         // 上传大小 500 kb内
                            loadText: '上传中...',  // 上传中文字提示
                            tip: '只能上传jpg/png/gif文件,且在10张图片内',
                            propsHttp: {
                                res: 'data'
                            },
                            uploadBefore: (file, done) => {
                                // 文件上传前处理
                                done(file)
                            },
                            uploadAfter: (res, done) => {
                                this.$message.success('上传成功');
                                done()
                            },
                            uploadError(error, column) {
                                // 上传失败
                                this.$message.error(error);
                            },
                            uploadExceed(limit, files, fileList, column) {
                                // 文件数量验证
                                this.$message.warning(`当前限制文件数量为 ${limit}, 当前共 ${files.length + fileList.length} `);
                            },
                        },
                        {
                            label: '规格',
                            prop: 'goodsSpecsList',
                            //maxlength: 0,
                            dataType: "array",
                            showWordLimit: true,
                            span: 20,
                            //labelWidth: this.labelWidth,
                            labelTip: "商品规格数据",
                            rules: [{
                                required: true,
                                message: "请至少填写一条 规格信息",
                                trigger: "blur"
                            }]
                        },
                        {
                            label: '商品详情 ',
                            prop: 'details',
                            maxlength: 0,
                            showWordLimit: true,
                            span: 20,
                            rules: [{
                                required: true,
                                message: "请输入 商品详情 ",
                                trigger: "blur"
                            }]
                        },
                        {
                            label: '是否包邮',
                            prop: 'isMail',
                            type: 'switch',
                            dicData: this.dict.get('IS_MAIL'),
                            span: 20,
                            rules: [{
                                required: true,
                                message: "请选择 是否包邮",
                                trigger: "blur"
                            }]
                        },

                    ]
                }
            }
        },
        created() {
            if (this.isIdFind) {
                this.findId(this.rowData);
            } else {
                this.obj = this.rowData;
                this.initSuccess = true;
            }

            // 商品分类数据(弹层数据)
            this.crud.get(this.uri.categoryTree, {disable: 0}).then((res) => {
                this.categoryList = res.data.data;
            });
        },
        methods: {
            emptytChange() {
                this.closeDialog(false);
            },
            submit(form, done) {
                this.crud.put(this.uri.info + "/" + this.obj.id, this.obj).then((res) => {
                    console.debug(res);
                    if (res.data.code == 200) {
                        this.closeDialog(true);
                    }
                    done(form);
                }).catch(err => {
                    console.error(err);
                    done(form);
                })
            },
            findId(rowData) {
                if (rowData != null && rowData.id != null) {
                    let thih = this;
                    this.crud.get(this.uri.info + "/" + rowData.id).then((res) => {
                        // 处理编辑按钮
                        for (let i = 0; i < res.data.data.goodsSpecsList.length; i++) {
                            res.data.data.goodsSpecsList[i].$cellEdit = false;
                        }
                        this.obj = res.data.data;
                        thih.initSuccess = true;
                    })
                }
            },
            rowSave(form, done) {
                //点击规格的保存按钮
                done(form);
            },
            addUpdate(row, index, done) {
                done()
            },
            rowDel(form, index, done) {
                // 删除当前行数据
                // this.obj.goodsSpecsList.splice(index, 1);
                done(form);
            }
        }
    }
</script>
